<template>
	<gracePage :headerHeight="0" statusBarBG="#FFE933">
		<!-- 页面主体 -->
		<view slot="gBody">
			<image src="../../static/image/loginhead.png" mode="widthFix" style="width: 100%;margin-bottom: 40rpx;"></image>
			<!-- 关闭按钮 -->
			<text class="iconfont icon-guanbi grace-black grace-bold" @click="back"></text>

			<view style="padding: 0 40rpx;">
				<template v-if="loginType === 'username'">
					<input type="text" class="uni-input" placeholder="昵称/手机号/邮箱" v-model="username" placeholder-class="grace-bold" />
					<view class="login-input-box">
						<input type="text" password class="uni-input forget-input" placeholder="请输入密码" v-model="password" placeholder-class="grace-bold" style="padding-right: 150rpx;" />
						<text class="forget grace-flex-center grace-flex-vcenter">忘记密码？</text>
					</view>
				</template>
				<!-- 手机验证码登录 -->
				<template v-else>
					<view class="login-input-box">
						<view class="phone grace-flex grace-flex-vcenter grace-h5">+86</view>
						<input type="number" v-model="phone" maxlength="11" class="uni-input phone-input" placeholder-class="grace-bold" placeholder="手机号" />
					</view>
					<view class="login-input-box">
						<input type="number" v-model="verifyCode" class="uni-input forget-input" placeholder-class="grace-bold" placeholder="请输入验证码" />
						<view class="forget grace-flex-center grace-flex-vcenter" @click="getVerifyCode">
							<text class="grace-flex-center grace-flex-vcenter verify-code">{{ !codetime ? '获取验证码' : codetime + ' s' }}</text>
						</view>
					</view>
				</template>
			</view>
			<button type="primary" :loading="loading" @click="login" :class="{ 'button-disable': disable }">登录</button>
			<!-- 账号密码/验证码登录 -->
			<view class="grace-flex-center grace-flex-vcenter" style="padding: 30rpx 0;">
				<text class="grace-h5" @click="changeLoginType">{{ loginType === 'phone' ? '账号密码登录' : '验证码登录' }}</text>
				<text class="iconfont icon-jinru grace-gray"></text>
			</view>
			<!-- 第三方登陆 -->
			<view class="third-login-title grace-flex-center" style="padding: 30rpx 0;color: #BBBBBB;">第三方登录</view>
			<third-login></third-login>
			<!-- 协议 -->
			<view class="login-rule grace-flex-center grace-flex-vcenter" style="padding: 30rpx 0;color: #BBBBBB;">
				注册即代表您同意
				<view class="grace-blue">《糗事百科用户协议》</view>
			</view>
		</view>
	</gracePage>
</template>

<script>
export default {
	data() {
		return {
			loginType: 'phone', //false代表账号密码登录，true代表手机验证码登录
			loading: false,
			username: '',
			password: '',
			phone: '',
			verifyCode: '',
			codetime: 0
		};
	},
	computed: {
		disable() {
			return (!this.username || !this.password) && (!this.phone || !this.verifyCode);
		}
	},
	methods: {
		// 验证手机号码
		isPhone() {
			let mPattern = /^1[34578]\d{9}$/;
			return mPattern.test(this.phone);
		},
		back() {
			uni.navigateBack({});
		},
		// 切换登录状态
		changeLoginType() {
			this.initInput();
			if (this.loginType === 'phone') {
				this.loginType = 'username';
			} else {
				this.loginType = 'phone';
			}
		},
		// 初始化表单
		initInput() {
			this.username = '';
			this.password = '';
			this.phone = '';
			this.verifyCode = '';
		},
		getVerifyCode() {
			if (this.codetime > 0) return;
			// 验证手机号合法性
			if (!this.isPhone()) {
				return uni.showToast({ title: '请输入正确的手机号码', icon: 'none' });
			}
			this.codetime = 60;
			let timer = setInterval(() => {
				this.codetime--;
				if (this.codetime < 1) {
					clearInterval(timer);
					this.codetime = 0;
				}
			}, 1000);
		},
		login() {
			if (this.loading) {
				return;
			}

			if (this.loginType === 'phone') {
				// 验证手机号合法性
				if (!this.isPhone()) {
					return uni.showToast({ title: '请输入正确的手机号码', icon: 'none' });
				}
			}
			this.loading = true;
			setTimeout(() => {
				this.loading = false;
			}, 2000);
		}
	}
};
</script>

<style lang="stylus">
button
	width 90%
	margin 30rpx auto
	color #333333 !important
	background #FFE934 !important
.button-disable
	background #F4F4F4 !important
	color #999999 !important
.uni-input
	border-bottom 1rpx solid #F4F4F4
	height 60rpx
	padding 15rpx 0
	line-height 60rpx
	font-size 32rpx
	background #FFFFFF
.third-login-title
	position relative
.third-login-title:before, .third-login-title:after
	content ''
	position absolute
	background #BBBBBB
	height 1rpx
	width 100rpx
	top 50%
.third-login-title:before
	left 25%
.third-login-title:after
	right 25%
.icon-guanbi
	position fixed
	top 70rpx
	left 30rpx
	font-size 40rpx
	z-index 100
.login-input-box
	position relative
.login-input-box .forget-input
	padding-right 150rpx
.login-input-box .forget, .login-input-box .phone
	position absolute
	top 0
	height 100%
	z-index 100
.login-input-box .forget
	width 150rpx
	right 0
.login-input-box .phone
	width 70rpx
	left 0
	font-weight bold
.login-input-box .phone-input
	padding-left 70rpx
.verify-code
	background #EEEEEE
	color #BBBBBB
	border-radius 10rpx
	font-size 25rpx
	width 150rpx
	padding 10rpx 0
</style>
